<template>
  <main>
    <div class="box">
      <h2>提交个人回访申请</h2>
      <p>
        为了你的申请得到及时有效处理和回应，请填写真实信息。我们将严格保护你的个人隐私
      </p>
      <div class="main">
        <ul class="clearfix">
          <li>
            <table>
              姓名
            </table>
            <input type="text" />
          </li>
          <li>
            <table>
              年龄
            </table>
            <input type="Number" />
          </li>
          <li>
            <table>
              身份证号
            </table>
            <input type="text" />
          </li>
          <li>
            <table>
              家庭住址
            </table>
            <textarea></textarea>
          </li>
          <li>
            <table>
              联系方式
            </table>
            <input type="text" />
          </li>
          <li>
            <table>
              收入情况
            </table>
            <textarea></textarea>
          </li>
          <li>
            <table>
              相关证明
            </table>
            <input type="file" />
          </li>
          <li>
            <table>
              回访时间
            </table>
            <input type="date" />
          </li>
          <li>
            <table>
              提交申请
            </table>
            <input type="button" value="提交" />
          </li>
        </ul>
        <p class="text">
          *提交申请成功请您注意接听工作人员的电话回访确认您所提交的信息是否准确核实之后回有工作人员上门为您提供帮助
        </p>
        <p class="text">*如提交失败请您稍后进行尝试或者联系网站维护人员</p>
        <p class="text">*提交完成之后可以在申请进度中进行查看</p>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: "MyPersonal",
};
</script>

<style scoped>
main {
  background-color: #ededed;
}
.box {
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
}
.box h2 {
  text-align: center;
  height: 45px;
}
.box p {
  text-align: center;
  color: red;
}
.main {
  width: 100%;
  padding: 50px;
  box-sizing: border-box;
}

.main li {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin: 20px 0;
  float: left;
}
.main li table,
.main li input,
.main li textarea {
  display: inline-block;
  margin: 0 auto;
}
.main li table {
  width: 100px;
  font-weight: 700;
  text-align: right;
  margin-right: 20px;
}
.main li input,
.main li textarea {
  width: 350px;
  height: 30px;
  padding-left: 20px;
  box-sizing: border-box;
}
.text {
  text-align: left !important;
  line-height: 30px;
}
</style>